<template>
  <h1>一个人的信息：</h1>
  <!-- 下面 setup() 里面定义的数据可以直接使用，vue3里面不用写到data里 -->
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>性别：{{ sex }}</h2>
  <!-- 当vue2写法的data里的属性，和vue3写法的setup里面的属性名冲突，以vue3写法的属性为主 -->
  <h2>a的值是：{{ a }}</h2>
  <button @click="sayHello">vue3说话</button>
  <button @click="sayHi">vue2说话</button>
</template>

<script>

export default {
  name: 'steup_test',
  // vue3中可以兼容vue2中的 data 和 methods
  data() {
    return {
      sex: '男',
      a: 100,   // vue2写法中定义了 a 变量
    }
  },
  methods: {
    sayHi() {
      alert('hi...')
      // 在 vue2写法的 methods 里面可以调用vue3写法中的函数
      this.sayHello()
    },
    test() {
      alert('vue2写法中的methods中的test方法')
    }
  },

  // setup() 里面定义的数据可以直接使用，vue3里面不用写到data里
  // setup函数一定不要加async修饰
  // vue3 中一个新的配置项，做为一个函数，Composition API （组合式api）
  setup() {   // setup是所有组合api表演的舞台

    // 数据
    let name = '张三'
    let age = 18
    let a = 200   // vue3写法中定义了 a 变量

    // 函数
    function sayHello() {
      alert(`我叫${name}，我今年${age}岁`)

      // vue3写法中在这里，无法调用vue2写法的methods里面的函数
      // this.test()
    }

    return {  // 返回一个对象，这样就可以在上面的模板页面中使用
      name,
      age,
      sayHello,
      a
    }
  }
}
</script>
